/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-03-21 10:14:46
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Avatar, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
import { FaAngleRight } from 'react-icons/fa';

export interface InvitationCardItemInfo {
  username: string;
  company?: string;
  mobile?: string;
  email?: string;
  createTime: string;
  recode?: string | null;
  recommendCode?: string | null;
  status: string;
  customerExpenseRecord: {
    commission: number;
    createTime: string;
    expenses: number;
    inviteeId: string;
    inviteeName: string;
    inviterId: string;
    isClosed: number;
    ratio: number;
  };
}
export default function InvitationCardItem({
  info,
  onOpenDetail,
}: {
  info: InvitationCardItemInfo;
  onOpenDetail: (info: InvitationCardItemInfo) => void;
}) {
  const { username, mobile, createTime } = info;
  const bg = useColorModeValue('gray.200', 'gray.800');

  return (
    <Flex
      justifyContent="center"
      alignItems="center"
      h="4rem"
      w="full"
      gap="4"
      p="3"
      rounded="lg"
      cursor="pointer"
      onClick={() => onOpenDetail(info)}
      _hover={{
        bg: useColorModeValue('gray.100', 'gray.900'),
      }}
    >
      <Flex w="20%" align="center">
        <Avatar size="md" top={0} cursor="pointer" bg={bg} />
      </Flex>
      <Flex minW="10rem" flexGrow="1" direction="column">
        <Flex gap="2" align="center">
          <Text fontSize="lg" fontFamily="body">
            {username}
          </Text>
          <Text fontSize="sm" color="gray.500" fontFamily="body">
            {mobile}
          </Text>
        </Flex>

        <Text fontSize="xs" fontFamily="body" color="gray.500">
          注册时间：{createTime}
        </Text>
      </Flex>
      <Flex pl="2" w="10%" justify="center" align="center">
        <Icon as={FaAngleRight} />
      </Flex>
    </Flex>
  );
}
